<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <div id="continer"></div>

</body>
<script src="./mustache.js"></script>
<script type="text/template" id="myTemplate">
<ul>
  {{#arr}}
    <li>
      <div>{{name}}的基本信息</div>
      <div>
        <p>姓名：{{name}}</p>  
        <p>年龄：{{age}}</p>  
        <p>性别：{{sex}}</p>
        {{#interest}}
          <p>爱好：{{.}}</p>
        {{/interest}}
      </div>
    </li>
  {{/arr}}
</ul>
</script>

<script type="text/template" id="myTemplate1">
  <h1>我买了一台{{thing}}，好{{mood}}</h1>
</script>
<script>

  // let templateStr =
  //   `<ul>{{#arr}}
  //       <li>
  //         <div>{{name}}的基本信息</div>
  //         <div>
  //           <p>姓名：{{name}}</p>
  //           <p>年龄：{{age}}</p>
  //           <p>性别：{{sex}}</p>
  //         </div>
  //       </li>
  //     {{/arr}}</ul>`;

  let templateStr = document.getElementById('myTemplate').innerHTML;
  let data = {
    arr: [
      { 'name': 'wzg', 'age': 12, 'sex': '男', interest: ['打篮球1', '踢足球'] },
      { 'name': 'gg', 'age': 15, 'sex': '男', interest: ['打篮球2', '踢足球'] },
      { 'name': 'ee', 'age': 16, 'sex': '男', interest: ['打篮球3', '踢足球'] }
    ]
  }
  let domStr = Mustache.render(templateStr, data);
  console.log(domStr);
  continer.innerHTML = domStr;


  // let data1 = {
  //   thing: '电脑',
  //   mood: '开心'
  // }
  // let templateStr1 = document.getElementById('myTemplate1').innerHTML;
  // console.log(templateStr1);
  // const domStr1 = templateStr1.replace(/\{\{(\w+)\}\}/g, function (a, $1, c, d) {
  //   console.log(a, $1, c, d);
  //   console.log($1);
  //   return data1[$1];
  // })
  // console.log(domStr1);

  // let continer = document.getElementById('continer');
  // continer.innerHTML = domStr1;
</script>

</html>